<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trang Chu</title>
<link type="text/css" href="css/trontastic/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript" src="ext/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="ext/jquery.tagsphere.js"></script>
</head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url(Font/FORTE.TTF);
}
a{
	text-decoration:none;
	color:#000;
}
.butHeader{
	font-size:12px;
	width:100px;
}
#divFull{
	width:70%;
	height:1000px;
	margin:auto;
	margin-top:100px;
		
}
#tableHeader{
	width:100%;
	height:50px;	
}
#tableBody{
	width:100%;	
}
.classHeader{
	width:70%;
	height:30px;
	margin:auto;
	font-family: myFirstFont;
	text-align:center;
	background:url(Image/Header.PNG);
	border: 2px dashed #999999;
	-webkit-box-shadow:3px 3px 15px #999;
	-webkit-transform:rotate(15deg);
	-webkit-border-radius:15%;
	-webkit-transition:1s;
}
.classHeader:hover{
	width:70%;
	height:30px;
	margin:auto;
	font-family: myFirstFont;
	text-align:center;
	background:url(Image/Header.PNG);
	border: 3px dashed #999999;
	-webkit-box-shadow:5px 5px 15px #FFF;
	-webkit-transform:rotate(0deg);
	-webkit-border-radius:15%;
}
#divBody{
	width:100%;
	height:800px;
	margin:auto;
	margin-top:100px;
	background:url(Image/gray-white-backgroun.jpg);
	border:1px dashed #00FF00;
	-webkit-box-shadow:0px 0px 10px #FFFFFF;
	-webkit-border-radius:30px;
	-webkit-border-top-right-radius:20%;
	-webkit-border-bottom-left-radius:20%;
	-webkit-background-size:cover;
}
#tableDangKy, #tableDangNhap{
	width:100%;
	font-size:12px;
	font-family:myFirstFont;
}
.tf{
	width:100%;
	background:url(Image/Thuy%20Mac.jpg);
	-webkit-box-shadow:3px 3px 5px #FFF;	
}
.ui-dialog-title{
	font-size:12px;	
}
.ui-widget{
	font-size:12px;
}
.classA{
	color:#0F0 !important;	
}
.classA:hover{
	color:#00F !important;
	font-size:14px;	
}
#tagcloud{
	animation:infinite;
	width:40%;
	height:200px;
	margin-left:auto;
	margin-bottom:20px;
	margin-right:20px;
	margin-top:20px;
	border:1px double #FF0000;
	background:url(Image/Simple-black-and-white.jpg);
	-webkit-box-shadow:0px 0px 20px #000000;
	-webkit-border-top-right-radius:50%;
	-webkit-transition:1s;
}
#tagcloud:hover{
-webkit-box-shadow:0px 0px 20px #FFF;
-webkit-border-radius:0%;
-webkit-border-radius:50%; 
}
#accordion{
	margin-bottom:auto;
	margin-right:auto;
	width:100%;
	height:600px;
	border:1px dotted #FF0000;	
}
#divTinTuc{
	border: 2px dashed #0000FF;	
}
#tabs{
	margin-right:20px;
}
</style>
<script>
	 $(function() {
        $( "button:first" ).button({
            icons: {
                primary: "ui-icon-home"
            },
            text: true
        }).next().button({
            icons: {
                primary: "ui-icon-folder-collapsed"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-disk"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-person"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-star"
            }
		}).next().button({
            icons: {
                primary: "ui-icon-cart"
            }
		});
		
		$("#butDangNhap").button({
            text:true
            
		});
		
        $( "#dialog1" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
			modal:true
        });
 		$("#butDangKy").button({
           text:true
		});
        $( "#butDangKy" ).click(function() {
            $( "#dialog1" ).dialog("open");
            return false;
        }); 
		
		 $( "#dialog2" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
			modal:true
        });
 		$("#butDangNhap").button({
           text:true
		});
        $( "#butDangNhap" ).click(function() {
            $( "#dialog2" ).dialog("open");
            return false;
        });
		$( "#datepicker" ).datepicker({
			changeMonth: true,
            changeYear: true
        });
		$("#tagcloud").tagcloud({
			centrex:120,
			centrey:90,
			min_font_size:8,
			max_font_size:20,
			zoom:80
		});
		
		$("#accordion").accordion({
		header:"> div > h3"
		});
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                ui.jqXHR.error(function() {
                    ui.panel.html(
                        "Chức Năng Này Đang Được Bảo Trì" );
                });
            }
        });
    });
</script>
<script type="text/javascript">

</script>

<body background="Image/Simple-black-and-white.jpg">

	<!-----------------------------Tạo dialog đăng ký-------------------------------------->
    
    <div id="dialog1" title="Đăng Kí Tài Khoản">
        	<table id="tableDangKy">
            	<tr>
                	<td colspan="2">
                    	<div align="center">Nếu bạn đã có tài khoản vui lòng <br><a href="#" class="classA">Đăng Nhập</a></div>
                        <hr width="80%"/>

                    </td>
                </tr>
                <tr>
                	<td align="right" style="width:35%">
                    	Nhập họ & tên:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    Tài khoản:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Mật khẩu:
                    </td>
                    <td>
                    	<input type="password" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Nhập lại mật khẩu:
                    </td>
                    <td>
                    	<input type="password" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Giới tính:
                    </td>
                    <td>
                    	<input type="radio" name="gioiTinh" id="nam" checked>
                       	<label for="nam">Nam</label>
                        <input type="radio" name="gioiTinh" id="nu">
                        <label for="nu">Nử</label>
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Ngày sinh:
                    </td>
                    <td>
                    	<input type="text" id="datepicker" class="tf">
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Mã xác nhận:
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                	<td align="right">
                    	Nhập mã xác nhận:
                    </td>
                    <td>
                    	<input type="text" class="tf">
                    </td>
                </tr>
                <tr>
          			<td colspan="2">
                    	<input type="checkbox" id="checkThoaThan"> <label> Tôi đồng ý với <a href="#" class="classA">Thỏa Thuận</a></label>
                    </td>
                </tr>
                <tr>
                	<td colspan="2" align="right">
                    <input type="submit" id="subDangKy" value="Đăng Ký">
                    </td>
                    
         		</tr>
         	</table>
    </div>
    
    <!------------------------------------------End----------------------------------------->
    
    <!-----------------------------Tạo Khung đăng nhập-------------------------------------->
    
    <div id="dialog2" title="Đăng Nhập">
    	<table id="tableDangNhap">
        	<tr>
                <td colspan="2">
                <div align="center">Nếu bạn chưa có tài khoản đăng kí <br><a href="#" class="classA">tại đây</a></div>
                <hr width="80%"/>
                </td>
            </tr>
            <tr>
            	<td>
                Tài khoản:
                </td>
                <td>
                	<input type="email" required class="tf">
                </td>
            </tr>
            <tr>
            	<td>
                Mật Khẩu:
                </td>
                <td>
                 	<input type="password" required class="tf">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                	<input type="checkbox" id="checkDangNhap">
                	<label for="checkDangNhap">Ghi nhớ tài khoản</label>
                </td>
            </tr>
            <tr>
            	<td>
                </td>
                <td align="right">
                <input type="submit" value="Đăng Nhập" id="subDangNhap" align="right">
                </td>
            </tr>
        </table>
    </div>
    
    <!-----------------------------------------End------------------------------------------>
    
	<div>
    <table width="100%">
    	<tr>
        	<td width="80%">
        		<button id="but1" class="butHeader">Trang Chủ</button>
        		<button id="but2" class="butHeader">Album</button>
        		<button id="but3" class="butHeader">Video</button>
        		<button id="but4" class="butHeader">Nghệ Sĩ</button>
        		<button id="but5" class="butHeader">Nhạc Hot</button>
        		<button id="but6" class="butHeader">Giỏ Hàng</button>
        
        	</td>
        	<td>
        		<button id="butDangNhap" class="butHeader">Đăng Nhập</button>
        		<button id="butDangKy" class="butHeader">Đăng Ký</button>
            </td>
        </tr>
    	
    </table>
    </div>
    <hr width="80%" align="left">
	<div id="divFull">
    	<div id="divHeader">
        	<table id="tableHeader">
            	<tr>
                	<td width="25%"><div class="classHeader"><a href="#">Nghe Nhạc</a></div></td>
                    <td width="25%"><div class="classHeader"><a href="#">Music Video</a></div></td>
                    <td width="25%"><div class="classHeader"><a href="#">Bảng Xếp Hạng</a></div></td>
                    <td width="25%"><div class="classHeader"><a href="#">Tin Tức</a></div></td>
                </tr>
            </table>
        </div>
        <div id="divBody">
			 <table id="tableBody" border="0">
            	<tr>
                	<td width="20%" valign="top">
                         <div id="accordion">
                            <div>
                                <h3>Chủ đề</h3>
                                <div>
                                	 		<a href="#"> Nhạc Hot Việt</a>
                                            <hr/>
                                     		<a href="#">Nhạc Việt Mới</a>
                                            <hr/>
                                            <a href="#">Nhạc Hot Rap Việt</a>
                                            <hr/>
                                            <a href="#">Nhạc Hot Âu Mỹ</a>
                                            <hr/>
                                            <a href="#">Nhạc Hot Hàn</a>
                                             <hr/>
                                            <a href="#">Nhạc Sàn</a>
                                             <hr/>
                                            <a href="#">Nhạc Giáng Sinh</a>
                                             <hr/>
                                            <a href="#">Nhạc Trử Tình</a>
                                             <hr/>
                                            <a href="#">Nhạc Giáng Sinh</a>
                                             <hr/>
                                            <a href="#">Nhạc Trử Tình</a>
                                             <hr/>
                                            <a href="#">Nhạc Giáng Sinh</a>
                                             <hr/>
                                            <a href="#">Nhạc Trử Tình</a>
                                            <hr/>
                                            <a href="#">Nhạc Giáng Sinh</a>
                                             <hr/>
                                            <a href="#">Nhạc Trử Tình</a>
                                            
                                </div>
                            </div>
                            <div>
                                <h3>Việt Nam</h3>
                                <div></div>
                            </div>
                            <div>
                                <h3>Âu Mỹ</h3>
                                <div></div>
                            </div>
                            <div>
                                <h3>Châu Á</h3>
                                <div></div>
                            </div>
                        </div>  	
                    </td>
                    <td valign="top">
                    	<div style="float:left; width:50%; height:250px" id="divTinTuc">
                        </div>
                        <div id="tagcloud">
                            <ul>
                                <li><a href="#10" rel="15">Link 10</a></li>
                                <li><a href="#11" rel="10">Link 11</a></li>
                                <li><a href="#12" rel="5">Link 12</a></li>
                                <li><a href="#13" rel="1">Link 13</a></li>
                                <li><a href="#14" rel="5">Link 14</a></li>
                            </ul>
                        </div>
                        <div style="width:40%; height:500px; margin-left:auto" id="tabs">
                        	 <ul>
                                <li><a href="ajax/content1.jsp">Bài hát</a></li>
                                <li><a href="ajax/content1.jsp?ID=1&lenh=trang1">Playlist</a></li>
                                <li><a href="ajax/content1.jsp?ID=2&lenh=trang2">MV</a></li>
                            </ul>
                            <div id="tabs-1">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>